<template>
  <div class="w-full" v-loading="loading">
    <el-table :data="list">
      <el-table-column label="节点名称" prop="nodeName"></el-table-column>
      <el-table-column label="节点类型">
        <template #default="{ row }">{{
            row.nodeType === 1 ? "章鱼" : "其他"
          }}</template>
      </el-table-column>
      <el-table-column label="登录Code" show-overflow-tooltip>
        <template #default="{ row }">
          <span
              class="cursor-pointer text-main"
              @click="copyToClipBoard(row.nodeLoginCode)"
          >{{ row.nodeLoginCode }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
          label="节点Url"
          prop="nodeUrl"
          min-width="100"
          show-overflow-tooltip
      ></el-table-column>
      <el-table-column
          label="节点联系人"
          width="110"
          prop="nodeLinkUser"
      ></el-table-column>
      <el-table-column
          label="节点联系方式"
          prop="nodeLinkMobile"
      ></el-table-column>
      <el-table-column
          label="创建人"
          width="80"
          prop="createBy"
      ></el-table-column>
      <el-table-column
          label="创建时间"
          width="170"
          prop="createTime"
      ></el-table-column>
      <el-table-column label="状态" width="100" prop="status">
        <template #default="{ row }">{{
            REVIEW_STATUS_ENUM[row.status]
          }}</template>
      </el-table-column>
    </el-table>
    <el-pagination
        v-show="list.length"
        class="w-full justify-end mt-12px"
        :total="total"
        layout="total, sizes, prev, pager, next"
        v-model:current-page="page.pageNum"
        v-model:page-size="page.pageSize"
        :page-sizes="[10, 30, 60, 120]"
    ></el-pagination>
  </div>
</template>

<script setup>
import { REVIEW_STATUS_ENUM } from "@/const";
import { useLoading, usePage } from "@/hooks";
import { copyToClipBoard } from "@/utils/dom";

const { loading, setLoading } = useLoading();
const { page, total } = usePage(10);
const $api = inject("$api");

const list = ref([]);
const getList = async () => {
  setLoading(true);
  try {
    const { data, total: resTotal } = await $api.company.getNodeList({
      ...page.value,
    });
    list.value = data;
    total.value = resTotal;
  } finally {
    setLoading(false);
  }
};

watch(
    () => page.value,
    () => {
      getList();
    },
    {
      deep: true,
    }
);

onMounted(() => {
  getList();
});
</script>
